import { View } from '@tarojs/components';
import BasicLayout from '@/components/BasicLayout';
import ShopCard from '@/components/ShopCard';
import gql from 'graphql-tag';
import { ShopFields } from '@/types/ShopEntity';
import useViewer from '@/hooks/useViewer';
import useQuery from '@/hooks/useQuery';
import { useMemo } from 'react';
import { CollectionFields } from '@/types/collection.entity';

const GetSelfCollectQuery = gql`
  query GetSelfCollect{
    getSelfCollect{
      ${CollectionFields}
      shop{
        ${ShopFields}
      }
    }
  }
`
const MyCollect = () => {
  useViewer()
  const { data } = useQuery(GetSelfCollectQuery)
  const shopList = useMemo(() => data?.getSelfCollect.map((e)=>e.shop) || [], [data])
  return (
    <BasicLayout>
      <View className="mt-[24rpx]">
        {shopList.map((item => (
          <ShopCard
            key={item.id}
            {...item}
          />
        )))}
      </View>
    </BasicLayout>
  );
};

export default MyCollect;
